<template>
  <div class="jc-component__range" ref="dragDiv">
    <div class="jc-range" :class="rangeStatus ? 'success' : ''" ref="moveDiv">
      <i
        @mousedown="rangeMove"
        :class="rangeStatus ? successIcon : startIcon"
      ></i>
      <span class="jc-span">{{ rangeStatus ? successText : startText }}</span>
    </div>
  </div>
</template>
<script>
// import APIS from '../../../api'
export default {
  props: {
    // 成功之后的函数
    successFun: {
      type: Function
    },
    // 失败之后的函数
    errorFun: {
      type: Function
    },
    controls: {
      type: Boolean
    },
    userPhone: {
      type: String
    }
  },
  watch: {
    controls: {
      immediate: true,
      handler (val) {
        this.control = val
      }
    }
  },
  data () {
    return {
      disX: 0,
      rangeStatus: false,
      startText: '请拖动滑块到最右边获取验证码', // 开始的文字
      startIcon: 'iconfont iconyoujiantou', // 开始的图标
      successText: '验证码发送成功', // 成功文字
      successIcon: 'iconfont iconduihao', // 成功图标
      control: false
    }
  },
  methods: {
    // 滑块移动
    rangeMove (e) {
      if (this.control) {
        let ele = e.target
        let startX = e.clientX
        let eleWidth = ele.offsetWidth
        let parentWidth = ele.parentElement.offsetWidth
        let MaxX = parentWidth - eleWidth
        if (this.rangeStatus) {
          // 不运行
          return false
        }
        document.onmousemove = e => {
          let endX = e.clientX
          this.disX = endX - startX
          if (this.disX <= 0) {
            this.disX = 0
          }
          if (this.disX >= MaxX - eleWidth) {
            // 减去滑块的宽度,体验效果更好
            this.disX = MaxX
          }
          ele.style.transition = '.1s all'
          ele.style.transform = 'translateX(' + this.disX + 'px)'
          e.preventDefault()
        }
        document.onmouseup = () => {
          if (this.disX !== MaxX) {
            ele.style.transition = '.5s all'
            ele.style.transform = 'translateX(0)'
          } else {
            let params = {
              userPhone: this.userPhone
            }
            this.APIS.smsSendSmsCode(params).then(res => {
              if (res.code === 200) {
                this.rangeStatus = true
                this.$emit('Sccess', false)
                this.$emit('smsRecordId', res.data.smsRecordId)
                // 执行成功的函数
                this.successFun && this.successFun()
              } else {
                // 执行失败的函数
                this.$Message.error(res.message)
                this.startText = '短信发送失败'
                setTimeout(() => {
                  ele.style.transition = '.5s all'
                  ele.style.transform = 'translateX(0)'
                  this.startText = '请重新拖动滑块到最右边获取验证码'
                }, 3000)
                this.errorFun && this.errorFun()
              }
            })
          }
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
}
</script>
<style scoped>
.jc-component__range {
  width: 100%;
}
.jc-range {
  background-color: #cccccc;
  position: relative;
  transition: 1s all;
  user-select: none;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px; /*no*/
}
.jc-range i {
  position: absolute;
  left: 0;
  width: 50px; /*no*/
  height: 100%;
  color: #919191;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jc-range.success {
  background-color: #7ac23c;
  color: #fff;
}
.jc-range.successErr {
  /* background-color: red; */
  color: #fff;
}
.jc-range.success i {
  color: #7ac23c;
}
.jc-span {
  margin-left: 40px;
  font-size: 12px;
}
</style>
